<template>
	<div class="base-input-rule text-sm">
		<div class="app-font-bold">{{ title }}</div>
		<div v-for="(item, index) in options" :key="index" class="mt-[2px] flex items-center">
			<base-icon v-if="item.valid" name="correct" class="text-success" size="16" />
			<base-icon v-else name="remove" class="text-danger" size="16" />
			<base-text block class="ml-1" :text="item.text" :textT="item.textT" />
		</div>
	</div>
</template>

<script lang="ts" setup>
import BaseIcon from '@/components/base/icon/index.vue'
import BaseText from '@/components/base/text/index.vue'

export interface RuleType {
	text?: string
	textT?: string
	valid: boolean
	rules?: RuleType[]
}
defineProps({
	title: {
		type: String,
		default: ''
	},
	options: {
		type: Array<RuleType>,
		default: () => []
	}
})
</script>
